<template>
  <div class="bigBox">
    <div class="middleBox">
      <h3>全部商品({{ length }})</h3>
      <div style="margin: 20px 0">
        <el-button type="danger" @click="deleteMore">批量删除</el-button>
      </div>
      <el-table
          :data="cartInfo"
          height="400"
          style="width: 100%"
          :header-cell-style="{ background: 'rgb(254,240,240,0.8)'}"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="hanfu_image" width="90px">
          <template #default="scope">
            <img :src="'http://localhost:8080/api/file/' + scope.row.hanfu_image" style="width: 65px;height: 65px">
          </template>
        </el-table-column>
        <el-table-column prop="hanfu_name" label="商品" />
        <el-table-column prop="cart_size" label="尺码" width="100">
          <template #default="scope">
            <el-select
                v-model="scope.row.cart_size"
                placeholder="请选择尺码"
                size="small"
                style="width: 50px"
                @change="handleChangeSize(scope.row)"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="cart_sum" label="数量" width="130">
          <template #default="scope">
            <el-input-number v-model="scope.row.cart_sum" :min="1" :max="scope.row.hanfu_inventory" @change="handleChange(scope.row)" size="small" style="width: 90px"/>
          </template>
        </el-table-column>
        <el-table-column prop="cart_price" label="价格" width="130">
          <template #default="scope">
            <h4 style="color:red;">￥{{ scope.row.cart_price }}</h4>
          </template>
        </el-table-column>
        <el-table-column width="100">
          <template #default="{row}">
            <el-button size="small" plain @click="handleDelete(row)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button size="large" style="width: 100px;margin-top: 20px;margin-left: 958px" type="warning" @click="handleToBuy">结算</el-button>
    </div>
  </div>
  <!-- 信息表单 -->
  <el-dialog v-model="dialogVisible" title="汉服信息修改" width="500">
    <el-input v-model="address" type="textarea" placeholder="请输入收货地址"/>
    <el-button style="display:block;margin:10px auto" type="danger" @click="onSubmit">确定</el-button>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {userApi} from "../../api/app";
import {ElMessage, ElMessageBox} from "element-plus";

const customerId = ref();
const cartInfo = ref();
const length = ref();
const getData = () => {
  userApi.getCartInfo({
    customerId: customerId.value
  }).then(response => {
    cartInfo.value = response;
    length.value = response.length;
  })
}

onMounted(() => {
  customerId.value = JSON.parse(localStorage.getItem('user')).customerId;
  getData();
})

const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = [];
  val.forEach(item => {
    multipleSelection.value.push(item);
  })
}

// 尺码选择
const options = [
  {
    value: 'XS',
    label: 'XS',
  },
  {
    value: 'S',
    label: 'S',
  },{
    value: 'M',
    label: 'M',
  },{
    value: 'L',
    label: 'L',
  },{
    value: 'XL',
    label: 'XL',
  },
]
// 尺码修改
const handleChangeSize = (row) => {
  userApi.changeCartInfo({
    cartId: row.cart_id,
    cartSize: row.cart_size
  })
}

// 数字输入修改
const handleChange = (row) => {
  row.cart_price = row.hanfu_price * row.cart_sum;
  userApi.changeCartInfo({
    cartId: row.cart_id,
    cartSum: row.cart_sum,
    cartPrice: row.cart_price,
  })
}

// 从购物车中删除
const handleDelete = (row) => {
    ElMessageBox.confirm(
        '确认要删除该条记录吗？',
        '注意',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(() => {
      userApi.deleteCartInfo({
        cartId: row.cart_id,
      }).then(response => {
        ElMessage({ type: 'success',message: '删除成功！' });
        getData();
      }).catch(error => {
        console.error(error);
      })
    }).catch(() => {
      ElMessage({ type: 'info',message: '取消删除。' });
    })
}

// // 批量删除
const deleteMore = () => {
  ElMessageBox.confirm(
      '确认要删除该条记录吗？',
      '注意',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    multipleSelection.value.forEach(item => {
      userApi.deleteCartInfo({
        cartId: item.cart_id
      }).then(response => {
        ElMessage({ type: 'success',message: '删除成功！' });
        getData();
      })
    })
  }).catch(() => {
    ElMessage({ type: 'info',message: '取消删除。' });
  })
}

const address = ref();
const dialogVisible = ref(false);
// 结算
const handleToBuy = () => {
  dialogVisible.value = true;
}
const onSubmit = () => {
  multipleSelection.value.forEach(item => {
    userApi.addOrder({
      customerId: customerId.value,
      hanfuId: item.hanfu_id,
      orderSum: item.cart_sum,
      orderSize: item.cart_size,
      orderAddress: address.value,
      orderPrice: item.cart_price
    }).then(response => {
      userApi.deleteCartInfo({
        cartId: item.cart_id
      }).then(response => {
        getData();
      })
      ElMessage({ type: 'success',message: '购买成功！' });
      dialogVisible.value = false;
    })
  })

}
</script>

<style scoped>
.bigBox {
  padding: 0 200px;
}
.middleBox {
  margin: 20px 0;
  background-color: #FFFFFF;
  border:1px solid white;
  border-radius: 25px;
  padding: 30px;
}
</style>